<template>
  <div>
    <div>【云端报警风险】</div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";
const props = defineProps({
  datas: {
    type: Array,
    requierd: true,
  },
});
// 1.初始化 echarts 实例
let myChart = null;
const target = ref(null);
// 2.构建 option 对象
const renderChart = () => {
  const options = {
    // 雷达图的坐标系配置
    radar: {
      name: {
        textStyle: {
          color: "#05d5ff",
          fontSize: 14,
        },
      },
      shape: "polygon",
      center: ["50%", "50%"],
      radius: "80%",
      startAngle: 120,
      axisLine: {
        lineStyle: {
          color: "rgba(5,213,255,.8)",
        },
      },
      splitLine:{
        show:true,
        lineStyle:{
          width:1,
          color:'rgba(5,213,255,.8)'
        }
      },
      indicator:props.datas.map((item)=>{
        return {
          name:item.name,
          max:100
        }
      }),
      splitArea:{
        show:false
      }
    },
  };
  // 3.通过 实例.setOption() 方法，将 option 对象挂载到实例上
  myChart.setOption(options);
};
onMounted(() => {});
</script>

<style lang="scss" scoped></style>
